<template>
	<view class="content">
		<!-- <view class="content1" v-if="zhezhao == true"></view> -->
		<view class="header_box">
			<view class="left_box">
				<u-icon name="arrow-left" size="52" @click="goback" color="#fff"></u-icon>
			</view>
			<view class="mid_box">商品详情</view>
			<view class="rt_box">
				<view class="wanfa_box" @click="goUrl(`/userPage/user/agreement?id=${21}`)">玩法</view>
				<view class="kefu_box" @click.stop="goUrlke('/orderPage/index/webkefuview')"></view>

			</view>
		</view>
		<view class="top_box">
			<view class="mid_pic_box">
				<view class="left_enter_box"><u-icon @click="downPic('up')" name="play-left-fill" size="52"
						color="#674103"></u-icon>
				</view>
				<view class="center_pic_box">
					<image :src="xqObj.cover_pic" />
				</view>
				<view class="right_txt_boxs">
					<view class="mid_name_box">
						{{ xqObj.name }}
					</view>
					<view class="mid_prc_box">
						价格 <text style="font-size: 40rpx;color: #9B2626;">{{ '$' + zongjia }}</text>
					</view>
					<view class="mid_xiang_box">
						第{{ xqObj.round }}箱/{{ xqObj.total_num }}箱
					</view>
					<view class="mid_tao_box">
						<span>{{xqObj.num}}人对决</span>
					</view>
				</view>
				<view class="rt_enter_box"><u-icon @click="downPic('down')" name="play-right-fill" size="52"
						color="#674103"></u-icon>
				</view>
			</view>
		</view>
		<view class="shfBut_box">
			<view class="left_sx_box" @click="renovate">刷新</view>
			<view class="mid_hx_box" @click="equipment">换箱</view>
			<!-- #ifdef APP-PLUS -->
			<view class="rt_fx_ox" @click="share">分享</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" data-name="shareBtn">分享</button>
			<!-- #endif -->
		</view>
		<view class="yyj_box">
			<view class="left_yyj_box">
				<view :class="[item.id == tabIndex ? 'yl_box1' : 'yl_box']" v-for="(item, index) in fenleiList"
					:key="index" @click="enterBtn(item)">{{ item.text }}</view>
			</view>
			<view class="rt_yyj_box">
				<view class="img_box">
					<image src="https://new.qingfentool.vip/upload/image/20230615/b3ec367a423e414dfe1a29b01fc17215.png"
						mode="scaleToFill" />
				</view>
				<view class="sy_txt_box">剩余{{ xqObj.current_num }}/{{ xqObj.all_num }}张</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_box">
			<!-- 预览 -->
			<template v-if="tabIndex == 1">
				<view v-for="item, index in xqList" :key="index"
					:class="item.type == 3 ? 'yulan_box' : item.type == 2 ? 'yulan_box1' : 'yulan_box2'">
					<view class="outofPrint_box" v-if="item.current_num < 1">
						<view class="print_box">
							<image
								src="https://new.qingfentool.vip/upload/image/20230614/85669214a24a8064f2f95394e0a71166.png"
								mode="scaleToFill" />
						</view>
					</view>
					<view class="top_box_txt">{{ item.type_text }}</view>
					<view class="yulan_image_box">
						<image :src="item.icon" mode="scaleToFill" />
					</view>
					<view class="yulam_name_box">{{ item.name }}</view>
					<view class="yulam_beizhu_box" v-if="item.pro == ''">赠品</view>
					<view class="yulam_beizhu_box" v-else>{{ '概率：' + item.pro }}</view>
					<view class="yulam_price_box">参考价：￥{{ item.price }}</view>
				</view>
			</template>
			<!--余量  -->
			<template v-if="tabIndex == 2">
				<view class="yuliang_box" v-for="item, index in xqList" :key="index">
					<view class="yuliang_name_box">{{ item.name }}</view>
					<view class="yuliang_fenshu_box">{{ item.current_num }}/{{ item.total_num }}</view>

					<view class="yuliang_gv_box" v-if="item.pro == ''">赠品</view>
					<view class="yuliang_gv_box" v-else>{{ '概率：' + item.pro }}</view>
					<view class="title_icon_box">
						<image :src="item.type_icon" mode="scaleToFill" />
					</view>
				</view>
			</template>
			<!-- 记录 -->
			<template v-if="tabIndex == 3">
				<view class="jilu_box" v-for="(item, index) in BoxingList" :key="index">
					<view class="jilu_head_box">
						<image :src="item.avatar" mode="scaleToFill" />
					</view>
					<view class="jilu_name_time_box">
						<view class="jilu_name_box">{{ item.nickname }}</view>
						<view class="jilu_time_box">{{ item.created_at }}</view>
					</view>
					<view class="jilu_ticon_shopname_box">
						<view class="jilu_ticon_box">
							<image :src="item.type_icon" mode="scaleToFill" />
						</view>
						<view class="jilu_shopname_box">{{ item.prize_name }}</view>
					</view>
				</view>
			</template>
		</scroll-view>
		<!-- floter -->
		<view class="dibu_box">
			<view class="wcn_box">
				<text v-if="tabIndex == 1">未成年人禁止使用，商品抽奖存在概率性，付费请谨慎</text>
			</view>
			<view class="enterOpen_box" @click="openBox">一发入魂</view>
		</view>
		<uni-popup ref="popup" type="bottom" :mask-click=false>
			<view class="cld">
				<!-- 支付顶部 -->
				<view class="zf_top_box">
					<view class="fanhuibtn_box" @tap="zftkgb">
						<image
							src="https://mh.qingfentool.vip/upload/image/20230313/bab4d5360d2c14b584ecb7ab53c684e2.png"
							mode=""></image>

					</view>
					<view class="shangpin_txt">
						{{ xqObj.name }}
					</view>
				</view>

				<!-- 优惠 -->
				<view class="youhui_box">
					<view class="youhuiquan_box">优惠券</view>
					<view class="xuanzequan_box" @tap="youhuiopen">选择优惠券></view>
				</view>
				<!-- 总计 -->
				<view class="zongji_box">
					<view class="zongjia_box">总计</view>
					<view class="zongji_money_box">￥{{ zongjia }}</view>
				</view>
				<view class="zfsm_box">
					<view class="one_txt">
						大王赏不支持包邮，已发货商品不支持7天无理由退换货
					</view>
					<view class="two_txt">
						开取盲盒后，抽中商品将进入您的盒柜，请在“盒柜-待处理” 中进行操作
					</view>
					<view class="three_txt">
						风险提示：盲盒存在概率性，付费请谨慎
					</view>
				</view>
				<!-- 点击开箱 -->
				<view class="kaixiang1_box" @tap="toUnbox">
					点击开箱
				</view>
				<view class="tab_xieyi" @tap="goCheck">
					<image :src="iconurl + '/static/index/pzselect3.png'" v-if="xieyiStu == false"></image>
					<image :src="iconurl + '/static/index/pzselect4.png'" v-else></image>
					<view class="" style="color: black; height: 100rpx; line-height: 100rpx;">已阅读并同意
						<text style="color: #FF5F5F;" @click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="youhuiquanPopup" type="bottom" :maskClick="false">

			<view class="cld">
				<!-- 支付顶部 -->
				<view class="zf_top_box">
					<view class="fanhuibtn_box" @tap="yhfanhui">
						<image
							src="https://mh.qingfentool.vip/upload/image/20230313/bab4d5360d2c14b584ecb7ab53c684e2.png"
							mode=""></image>
					</view>
					<view class="shangpin_txt">
						优惠券
					</view>

				</view>
				<!-- 优惠内容-->
				<view class="content_box" style="color: black;">

					<template v-if="yhList.length > 0">
						<view class="" v-for="(item, index) in yhList" :key="index">
							<view>{{ item }}</view>
						</view>
					</template>
					<template v-else>
						<view class="wuyh_box" style="width: 100%;height: 1120rpx;">
							<view style="    width: 65%;height: 41%; margin: auto; position: relative;">
								<image style="width: 100%; height: 100%;"
									src="https://mh.qingfentool.vip/upload/image/20230220/2dfd80fe8093ebd307dc17127a70db3f.png"
									mode=""></image>
								<view
									style="color: #999;font-size: 32rpx;width: 100%;height: 70rpx;line-height: 70rpx;text-align: center;bottom: 20rpx;: 700;position: absolute;">
									暂无优惠券
								</view>
							</view>


						</view>
					</template>
				</view>
			</view>
		</uni-popup>
		<!-- 开奖弹窗 -->
		<uni-popup mode="center" ref="kaijiangTc" border-radius="20" :mask-click=false>
			<view class="kaixiang_box">
				<view class="top1_box">
					<image src="https://new.qingfentool.vip/upload/image/20230704/9d71720b0935309f280c7e2562ab2e1a.png"
						mode="scaleToFill" />
				</view>
				<view class="pic_box">
					<view class="kaixiang_dengji_box">
						<image :src="prizeList.type_icon" mode="scaleToFill" />
					</view>
					<view class="sm_pic_box">
						<image :src="prizeList.prize_icon" mode="scaleToFill" />
					</view>
					<view class="sm_name_box">{{ prizeList.prize_name }}</view>
					<view class="sm_prc_box">官方价：{{ prizeList.price }}龙珠</view>
				</view>
				<view class="kaijiang_txt">已为您存放至盒柜
					<text @click="gohegui" style="color:#FF9851;">前往盒柜</text>
				</view>
				<view class="enter_box" @click="guanbi">确定</view>
			</view>
		</uni-popup>
		<!-- <resPopup ref="boxResult"></resPopup> -->
	</view>
</template>
<script>
	// import resPopup from './../../components/popup/resultPopup.vue'
	export default {
		components: {
			// resPopup
		},
		data() {
			return {
				iconurl: this.$configs.urls,
				chouPrice: '', //抽奖价格
				yhList: [], //优惠券列表
				xieyiStu: false, //协议
				boxId: '', //盲盒id
				currentIndex: 1, //当前所在图片下标
				zongxiangshu: 5,
				boxType: '', //盒子类型
				tabIndex: 1, //当前 预览/余量/记录所选中的状态
				prizeList: {}, // 抽奖结果
				BoxingList: [], //记录列表
				xqObj: { //详情
					num: '', //几人套
					price: '', //价格
					name: '', //name
					cover_pic: '', //大图
					share_pic: '', //分享图片
					total_num: '', //总箱数
					round: '', //第几箱
					current_num: '', //剩余几张
					all_num: '', //总张数
				},
				zongjia: '', //价格
				xqList: [], //详情列表（预览/余量
				fenleiList: [{
						id: 1,
						text: '预览',
					},
					{
						id: 2,
						text: '余量'
					},
					{
						id: 3,
						text: '记录'
					}
				],
			}
		},
		onLoad(e) {
			console.log(e)
			this.boxId = e.box_id
			this.xqObj.round = e.round || ''
			// this.boxType = e.box_type

		},
		onShow() {
			this.getObj()
		},
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '龙争虎斗',
				path: 'rollPages/index/shadowboxing?box_id=' + this.boxId + '&round=' + this.xqObj.round,
				imageUrl: this.xqObj.share_pic,
			}
		},
		methods: {
			// 刷新
			renovate() {
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				this.getObj()
				uni.hideLoading()
			},
			// 详情
			getObj() {
				let data = {
					box_id: this.boxId,
					round: this.xqObj.round
				}
				this.$Request.get(this.$api.mhapi.index, data).then(res => {
					this.xqObj = res.data.box //详情对象
					this.zongjia = this.xqObj.price.toFixed(2) // 商品价格
					this.xqList = res.data.prize_list
					this.boxType = res.data.box.cat_id
				})
			},
			// 客服
			goUrlke(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 协议
			goCheck() {
				this.xieyiStu = !this.xieyiStu
			},
			equipment() {
				uni.navigateTo({
					url: '/userPage/user/equipment?box_id=' + this.boxId + '&boxImage=' + this.xqObj.cover_pic
				})
			},
			// 分享
			share() {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.xqObj.share_pic,
					title: '龙争虎斗',
					miniProgram: {
						id: 'gh_fee2a9ecb3f0',
						path: 'rollPages/index/between?box_id=' + this.boxId + '&round=' + this.xqObj.round,
						webUrl: this.xqObj.share_pic, //地址
						type: 0,
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail: err => {
						console.log("err", err)
					}
				});
			},
			// 返回
			goback() {
				uni.navigateBack()
			},
			// 左右切换
			downPic(value) {
				if (value == 'down') {
					this.xqObj.round++
					if (this.xqObj.round == this.xqObj.total_num + 1) {
						this.xqObj.round = 1
					}
				} else {
					if (this.xqObj.round <= 1) {
						this.xqObj.round = this.xqObj.total_num + 1;
					}
					this.xqObj.round--
				}
				this.getObj()
				this.init()

			},
			// 预览/余量/记录点击
			enterBtn(item) {
				this.tabIndex = item.id
				if (item.id == 3) {
					this.init()
				}
			},
			// 记录方法
			init() {
				let data = {
					round: this.xqObj.round,
					box_id: this.boxId
				}
				this.$Request.get(this.$api.mhapi.boxOrderLog, data).then(res => {
					this.BoxingList = res.data
				})
			},
			// 开箱
			openBox() {
				if (this.xqObj.status == 1) {
					uni.showToast({
						title: '已经抽完',
						icon: 'none'
					})
					return
				}
				this.$refs.popup.open('bottom')
				this.xieyiStu = false
			},
			// 关闭支付弹窗
			zftkgb() {
				this.$refs.popup.close('bottom')
			},
			// 打开优惠弹窗
			youhuiopen() {
				this.$refs.youhuiquanPopup.open('bottom')
			},
			// 关闭优惠弹窗
			yhfanhui() {
				this.$refs.youhuiquanPopup.close('bottom')
			},
			// 点击开箱
			toUnbox() {
				this.$u.throttle(() => {
					if (this.xieyiStu == false) {
						uni.showToast({
							title: '请阅读并同意用户协议',
							icon: 'none'
						});
						return
					}
					let data = {
						box_id: this.boxId,
						pay_mode: 1,
						pay_type: 3,
						invite_code: uni.getStorageSync('invite_code'),
						idef: uni.getStorageSync('idef'),
						round: this.xqObj.round
					};
					this.$Request.post(this.$api.mhapi.newSubmit, data).then(res => {
						uni.setStorageSync('cabShuaxin', 1)

						if (res.data.is_prohibit_pay == 1) {
							uni.navigateTo({
								url: '/userPage/user/balance?heji_num=' + res.data.paidou +
									'&boxType=' + this.boxType + '&round=' + this.xqObj.round +
									'&fromPage= 1' + '&box_id=' + this.boxId + '&data= ' + JSON
									.stringify(data)

							});
							return;
						}
						let data1 = {
							order_id: res.data.order_id
						}
						this.$Request.get(this.$api.mhapi.payOrderSu, data1).then(result => {
							this.getObj()
							this.prizeList = result.data.list[0].prize[result.data.list[0].prize.length - 1]
							console.log(this.prizeList)
							this.$refs.kaijiangTc.open()
							this.$refs.popup.close('')
						})

					});
				}, 2000)
			},
			// 去盒柜
			gohegui() {
				uni.switchTab({
					url: '/pages/index/cabinetBox'
				})
			},
			// 关闭抽奖结果
			guanbi() {
				this.$refs.kaijiangTc.close()
			},
			// 打拳玩法
			goUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	button {
		width: 190rpx;
		height: 72rpx;
		background: rgba(255, 211, 34, 0);
		background-image: url('https://new.qingfentool.vip/upload/image/20230628/114299c5a39488441f9f0b4b8c23ce00.png');
		background-size: 100% 100%;
		font-size: 34rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
		padding: 0;
		margin: 0;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-image: url('https://new.qingfentool.vip/upload/image/20230628/f5e9c10de6b935c8a5edad600b175df5.png');
		background-size: 100% 100%;
		position: relative;

		.header_box {
			width: 100%;
			height: 140rpx;
			position: relative;
			margin-bottom: 30rpx;

			.left_box {
				width: 20rpx;
				height: 34rpx;
				position: absolute;
				left: 20rpx;
				bottom: 10rpx;
			}

			.mid_box {
				width: 300rpx;
				height: 46rpx;
				font-size: 36rpx;
				font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
				font-weight: 400;
				line-height: 46rpx;
				position: absolute;
				text-align: center;
				color: #fff;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 0;
			}

			.rt_box {
				width: 120rpx;
				height: 46rpx;
				position: absolute;
				/* #ifdef APP-PLUS */
				right: 10rpx;
				bottom: 0;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				left: 120rpx;
				bottom: 0;
				/* #endif */
				display: flex;
				justify-content: space-between;
				align-items: center;



				.wanfa_box {
					width: 60rpx;
					height: 42rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					/* #ifdef APP-PLUS */
					font-weight: 400;
					font-size: 26rpx;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					font-weight: 600;
					font-size: 28rpx;
					/* #endif */
					color: #FFFFFF;
					line-height: 42rpx;
				}

				.kefu_box {
					width: 40rpx;
					height: 42rpx;
					background-image: url('https://mh.qingfentool.vip/upload/image/20230509/bfdb09414fbe7cd994b8a4cfd9ab6119.png');
					background-size: 100% 100%;
				}

			}
		}

		.top_box {
			width: 710rpx;
			height: 306rpx;
			margin: auto;
			background-image: url('https://new.qingfentool.vip/upload/image/20230628/6dca5953f3ac279073be114bfa0ebcda.png');
			background-size: 100% 100%;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 1rpx solid #FFCC00;
			margin-bottom: 32rpx;

			.mid_pic_box {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				position: relative;

				.left_enter_box {
					float: left;
					width: 60rpx;
					height: 100%;
					line-height: 320rpx;
				}

				.center_pic_box {
					position: absolute;
					width: 186rpx;
					height: 186rpx;
					left: 128rpx;
					top: 61rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.right_txt_boxs {
					position: absolute;
					width: 216rpx;
					height: 100%;
					right: 110rpx;
					padding-top: 44rpx;

					.mid_name_box {
						width: 100%;
						height: 65rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 44rpx;
						font-family: Songti SC-黑体, Songti SC;
						font-weight: normal;
						color: #674103;
						line-height: 65rpx;
					}

					.mid_prc_box {
						width: 100%;
						height: 62rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						font-family: Songti SC-黑体, Songti SC;
						font-weight: normal;
						color: #674103;
						line-height: 50rpx;
					}

					.mid_xiang_box {
						width: 100%;
						height: 40rpx;
						font-size: 28rpx;
						font-family: Songti SC-黑体, Songti SC;
						font-weight: normal;
						color: #9B2626;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}

					.mid_tao_box {
						width: 100%;
						height: 30rpx;
						font-size: 28rpx;
						font-family: HelloFont ID JiangHuTi-Regular, HelloFont ID JiangHuTi;
						font-weight: 400;
						color: #E4CBA6;
						line-height: 30rpx;

						span {
							background-color: #674103;
							padding: 0 20rpx;
							border-radius: 11rpx;
						}
					}

				}

				.rt_enter_box {
					float: right;
					width: 60rpx;
					height: 100%;
					line-height: 320rpx;
				}
			}
		}

		.shfBut_box {
			width: 710rpx;
			height: 72rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.left_sx_box,
			.mid_hx_box,
			.rt_fx_ox {
				width: 190rpx;
				height: 72rpx;
				background-image: url('https://new.qingfentool.vip/upload/image/20230628/114299c5a39488441f9f0b4b8c23ce00.png');
				background-size: 100% 100%;
				font-size: 34rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}


		}

		.yyj_box {
			width: 710rpx;
			height: 72rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 18rpx;


			.left_yyj_box {
				width: 350rpx;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.yl_box {
					width: 110rpx;
					height: 50rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 50rpx;
				}

				.yl_box1 {
					width: 110rpx;
					height: 50rpx;
					text-align: center;
					font-size: 40rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 50rpx;
					letter-spacing: 1rpx;
					-webkit-text-stroke: 1rpx #FFB200;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.rt_yyj_box {
				width: 210rpx;
				height: 50rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.img_box {
					width: 32rpx;
					height: 30rpx;
					margin-right: 8rpx;
					// background: #FFFFFF;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.sy_txt_box {
					// width: 150rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}

			}
		}

		.scroll_box {
			width: 710rpx;
			height: calc(100vh - 910rpx);
			margin: auto;
			overflow: hidden;

			// 预览
			.yulan_box {
				width: 226rpx;
				height: 274rpx;
				float: left;
				background: rgba(155, 38, 38, 0.3);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 2rpx solid #9B2626;
				margin-right: 14rpx;
				margin-bottom: 22rpx;
				position: relative;

				.outofPrint_box {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.4);
					z-index: 2;

					.print_box {
						position: absolute;
						width: 138rpx;
						height: 112rpx;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index: 2;

						image {
							width: 138rpx;
							height: 112rpx;
							z-index: 2;
						}
					}
				}

				.top_box_txt {
					width: 62rpx;
					height: 20rpx;
					font-size: 18rpx;
					font-family: HelloFont ID JiangHuTi-Regular, HelloFont ID JiangHuTi;
					font-weight: 400;
					color: #E5CA9D;
					line-height: 20rpx;
					text-align: center;
					margin-bottom: 4rpx;
					position: absolute;
					background-color: #26369B;
					top: 14rpx;
					left: 12rpx;
				}

				.yulan_image_box {
					width: 130rpx;
					height: 152rpx;
					// border: 1rpx solid #fff;
					margin: auto;
					margin-bottom: 5rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.yulam_name_box {
					width: 178rpx;
					height: 26rpx;
					font-size: 18rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 26rpx;
					margin: auto;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 2rpx;
				}

				.yulam_beizhu_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
					margin-bottom: 2rpx;
				}

				.yulam_price_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
				}
			}

			.yulan_box1 {
				width: 224rpx;
				height: 274rpx;
				float: left;
				background: rgba(255, 211, 34, 0.3);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 2rpx solid #FFD322;
				margin-right: 14rpx;
				margin-bottom: 22rpx;
				position: relative;

				.outofPrint_box {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.4);
					z-index: 2;

					.print_box {
						position: absolute;
						width: 138rpx;
						height: 112rpx;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index: 2;

						image {
							width: 138rpx;
							height: 112rpx;
							z-index: 2;
						}
					}
				}

				.top_box_txt {

					width: 62rpx;
					height: 20rpx;
					font-size: 18rpx;
					font-family: HelloFont ID JiangHuTi-Regular, HelloFont ID JiangHuTi;
					font-weight: 400;
					color: #E5CA9D;
					line-height: 20rpx;
					text-align: center;
					margin-bottom: 4rpx;
					position: absolute;
					background-color: #2A5831;
					top: 14rpx;
					left: 12rpx;
					margin-bottom: 4rpx;
				}

				.yulan_image_box {
					width: 130rpx;
					height: 152rpx;
					// border: 1rpx solid #fff;
					margin: auto;
					margin-bottom: 5rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.yulam_name_box {
					width: 178rpx;
					height: 26rpx;
					font-size: 18rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 26rpx;
					margin: auto;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 2rpx;
				}

				.yulam_beizhu_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
					margin-bottom: 2rpx;
				}

				.yulam_price_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
				}
			}

			.yulan_box2 {
				width: 224rpx;
				height: 274rpx;
				float: left;
				background: rgba(38, 54, 155, 0.3);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 2rpx solid #26369B;
				margin-right: 14rpx;
				margin-bottom: 22rpx;
				position: relative;

				.outofPrint_box {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.4);
					z-index: 2;

					.print_box {
						position: absolute;
						width: 138rpx;
						height: 112rpx;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index: 2;

						image {
							width: 138rpx;
							height: 112rpx;
							z-index: 2;
						}
					}
				}

				.top_box_txt {

					width: 62rpx;
					height: 20rpx;
					font-size: 18rpx;
					font-family: HelloFont ID JiangHuTi-Regular, HelloFont ID JiangHuTi;
					font-weight: 400;
					color: #E5CA9D;
					line-height: 20rpx;
					text-align: center;
					margin-bottom: 4rpx;
					position: absolute;
					background-color: #26369B;
					top: 14rpx;
					left: 12rpx;
					margin-bottom: 4rpx;
				}

				.yulan_image_box {
					width: 130rpx;
					height: 152rpx;
					// border: 1rpx solid #fff;
					margin: auto;
					margin-bottom: 5rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.yulam_name_box {
					width: 178rpx;
					height: 26rpx;
					font-size: 18rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 26rpx;
					margin: auto;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 2rpx;
				}

				.yulam_beizhu_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
					margin-bottom: 2rpx;
				}

				.yulam_price_box {
					width: 178rpx;
					height: 24rpx;
					margin: auto;
					font-size: 16rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 24rpx;
				}
			}

			//余量
			.yuliang_box {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 22rpx;

				.title_icon_box {
					width: 114rpx;
					height: 58rpx;

					// background-color: #fff;
					image {
						width: 100%;
						height: 100%;
					}
				}

				.yuliang_fenshu_box {
					width: 80rpx;
					height: 58rpx;
					font-size: 40rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 58rpx;
					text-align: center;
				}

				.yuliang_name_box {
					width: 272rpx;
					height: 58rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 58rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.yuliang_gv_box {
					width: 160rpx;
					height: 58rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 58rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.jilu_box {
				width: 706rpx;
				height: 128rpx;
				margin: auto;
				margin-bottom: 26rpx;
				background: linear-gradient(132deg, #E3CBA8 0%);
				box-shadow: inset 0rpx 0rpx 102rpx 0rpx rgba(255, 189, 34, 0.3);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.jilu_head_box {
					width: 96rpx;
					height: 96rpx;
					opacity: 1;
					border-radius: 50%;
					// background-color: #fff;
					margin: 0 16rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.jilu_name_time_box {
					width: 230rpx;
					height: 100rpx;

					.jilu_name_box {
						width: 230rpx;
						height: 50rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 50rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.jilu_time_box {
						width: 300rpx;
						height: 50rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 50rpx;
					}
				}

				.jilu_ticon_shopname_box {
					width: 298rpx;
					height: 100rpx;

					.jilu_ticon_box {
						width: 118rpx;
						height: 58rpx;
						float: right;
						margin-right: 14rpx;
						// background-color: #fff;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.jilu_shopname_box {
						width: 298rpx;
						height: 42rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 42rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}

		.dibu_box {
			width: 710rpx;
			height: 210rpx;
			margin: auto;

			.wcn_box {
				width: 100%;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 22rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #FFFFFF;
				margin-bottom: 28rpx;
			}

			.enterOpen_box {
				width: 560rpx;
				height: 84rpx;
				// background: #FFB200;
				// border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin: auto;
				text-align: center;
				line-height: 84rpx;
				font-size: 40rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #FFFFFF;
				background-image: url('https://new.qingfentool.vip/upload/image/20230628/af9b1d28b5ba8becaec5636ba6512811.png');
				background-size: 100% 100%;
			}
		}

		.cld {
			position: absolute;
			height: 780rpx;
			bottom: 0;
			z-index: 999999999999999;
			width: 100%;
			border-radius: 50rpx 50rpx 0 0;
			background-color: #ffffff;

			.zf_top_box {
				width: 98%;
				height: 100rpx;
				margin: auto;
				line-height: 100rpx;

				.fanhuibtn_box {
					width: 6%;
					height: 43%;
					margin-top: 12rpx;
					float: right;
					margin-right: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shangpin_txt {
					font-weight: 700;
					color: #333333;
					font-size: 29rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 0%);
					margin-left: -46%;
					margin-left: 10rpx;
				}
			}

			.youhui_box {
				width: 98%;
				height: 60rpx;
				margin: 50rpx auto;
				line-height: 60rpx;
				display: flex;
				justify-content: space-between;
				padding-right: 58rpx;
				padding-left: 10rpx;

				.youhuiquan_box {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}

				.xuanzequan_box {
					font-size: 31rpx;
					font-weight: 900;
					color: #999999;
				}
			}

			.zongji_box {
				width: 98%;
				height: 60rpx;
				margin: 50rpx auto;
				line-height: 60rpx;
				display: flex;
				justify-content: space-between;
				padding-right: 58rpx;
				padding-left: 20rpx;

				.zongjia_box {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}

				.zongji_money_box {
					font-size: 36rpx;
					font-weight: 900;
					color: #FF3A3A;
				}
			}

			.zfsm_box {
				width: 708rpx;
				height: 180rpx;
				background: #EBEBEB;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin: auto;
				padding: 24rpx;

				.one_txt,
				.two_txt,
				.three_txt {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-top: 5rpx;
				}
			}


			.kaixiang1_box {
				margin: 24rpx auto;
				background-color: #5191FF;
				width: 316rpx;
				height: 86rpx;
				font-size: 44rpx;
				line-height: 86rpx;
				color: #FFFFFF;
				font-weight: 500;
				text-align: center;
				border-radius: 10rpx;
			}

			.tab_xieyi {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 29rpx;
				position: absolute;
				left: 194rpx;
				bottom: 37rpx;
				z-index: 600;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3D3D3D;
					padding-left: 20rpx;
				}
			}
		}

		/deep/.u-mode-center-box {
			background: none !important;
		}

		.kaixiang_box {
			width: 710rpx;
			height: 1100rpx;
			padding-top: 20rpx;
			border-radius: 50rpx;
			background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png') !important;
			background-size: 100% 100% !important;


			.top1_box {
				width: 95%;
				height: 106rpx;
				margin: auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.pic_box {
				width: 420rpx;
				height: 544rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				opacity: 1;
				background-color: #26369B;
				margin: 50rpx auto;
				// margin-top: ;
				margin-bottom: 54rpx;
				padding-left: 28rpx;
				padding-top: 28rpx;

				.kaixiang_dengji_box {
					width: 150rpx;
					height: 60rpx;
					margin-bottom: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.sm_pic_box {
					width: 314rpx;
					height: 320rpx;
					margin: auto;
					margin-bottom: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.sm_name_box {
					width: 264rpx;
					height: 45rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 35rpx;
					margin: auto;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 10rpx;
				}

				.sm_prc_box {
					width: 198rpx;
					height: 40rpx;
					font-size: 22rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 33rpx;
					margin: auto;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.kaijiang_txt {
				width: 100%;
				height: 20rpx;
				font-size: 36rpx;
				font-family: HappyZcool-2016-Medium, HappyZcool-2016;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 19rpx;
				text-align: center;
				margin-bottom: 100rpx;
			}

			.enter_box {
				width: 316rpx;
				height: 96rpx;
				background-image: url('https://new.qingfentool.vip/upload/image/20230628/a88c92872ba2c48f463db115bb6f94a3.png');
				background-size: 100% 100%;
				// opacity: 1;
				// text-align: center;
				// line-height: 98rpx;
				// color: #fff;
				margin: auto;
			}
		}
	}
</style>